// ==============================================
// 智能体问答系统 - SCSS Mixins
// ==============================================

// 引入变量
@import './variables.scss';

// 响应式布局 Mixins
// ----------------------------------------------

@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: #{$breakpoint-xs}) {
      @content;
    }
  }
  @else if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) {
      @content;
    }
  }
  @else if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) {
      @content;
    }
  }
  @else if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  }
  @else if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  }
  @else if $breakpoint == xxl {
    @media (min-width: #{$breakpoint-xxl}) {
      @content;
    }
  }
}

@mixin respond-below($breakpoint) {
  @if $breakpoint == sm {
    @media (max-width: #{$breakpoint-sm - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == md {
    @media (max-width: #{$breakpoint-md - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == lg {
    @media (max-width: #{$breakpoint-lg - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == xl {
    @media (max-width: #{$breakpoint-xl - 1px}) {
      @content;
    }
  }
  @else if $breakpoint == xxl {
    @media (max-width: #{$breakpoint-xxl - 1px}) {
      @content;
    }
  }
}

// 工具 Mixins
// ----------------------------------------------

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@mixin flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin scrollbar-style($width: 6px, $track-color: transparent, $thumb-color: rgba(144, 147, 153, 0.3)) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      background-color: rgba(144, 147, 153, 0.5);
    }
  }
}

@mixin card-style($padding: $spacing-lg, $radius: $border-radius-base) {
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);
  border-radius: $radius;
  box-shadow: $box-shadow-base;
  padding: $padding;
  transition: $transition-box-shadow;

  &:hover {
    box-shadow: $box-shadow-light;
  }
}

@mixin dark-mode {
  &.dark {
    @content;
  }
}

// 按钮样式 Mixins
// ----------------------------------------------

@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  font-weight: $font-weight-primary;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: $transition-all;
  user-select: none;
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

@mixin button-variant($color, $background, $border-color: $background) {
  color: $color;
  background-color: $background;
  border-color: $border-color;

  &:hover:not(:disabled) {
    color: $color;
    background-color: darken($background, 5%);
    border-color: darken($border-color, 5%);
  }

  &:active:not(:disabled) {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border-color, 10%);
  }
}

@mixin button-outline-variant($color) {
  color: $color;
  background-color: transparent;
  border-color: $color;

  &:hover:not(:disabled) {
    color: white;
    background-color: $color;
    border-color: $color;
  }
}

// 输入框样式 Mixins
// ----------------------------------------------

@mixin input-base {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--el-border-color);
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  line-height: 1.5;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: $transition-border, $transition-box-shadow;

  &:focus {
    outline: none;
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
  }

  &:disabled {
    background-color: var(--el-disabled-bg-color);
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
  }

  &::placeholder {
    color: var(--el-text-color-placeholder);
  }
}

// 动画 Mixins
// ----------------------------------------------

@mixin fadeIn($duration: 0.3s) {
  animation: fadeIn $duration ease-in-out;
}

@mixin slideInUp($duration: 0.3s) {
  animation: slideInUp $duration ease-out;
}

@mixin slideInRight($duration: 0.3s) {
  animation: slideInRight $duration ease-out;
}

@mixin pulse($duration: 2s) {
  animation: pulse $duration infinite;
}

@mixin loading-dots($duration: 2s) {
  &::after {
    content: '...';
    animation: typing $duration infinite;
  }
}

// 布局 Mixins
// ----------------------------------------------

@mixin container($max-width: 1200px) {
  width: 100%;
  max-width: $max-width;
  margin: 0 auto;
  padding: 0 $spacing-lg;
}

@mixin grid($columns: 12, $gap: $spacing-lg) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

@mixin grid-column($span: 1) {
  grid-column: span $span;
}

// 定位 Mixins
// ----------------------------------------------

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin absolute-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@mixin fixed-fill {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

// 智能体应用特定 Mixins
// ----------------------------------------------

@mixin message-bubble($bg-color, $text-color: inherit) {
  background-color: $bg-color;
  color: $text-color;
  padding: $chat-message-padding;
  border-radius: $chat-message-border-radius;
  margin: $chat-message-margin;
  position: relative;
  
  // 气泡尾巴效果（可选）
  &.with-tail::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }
}

@mixin task-card($status-color) {
  @include card-style($task-card-padding, $task-card-border-radius);
  margin: $task-card-margin;
  border-left: 4px solid $status-color;
  
  .task-status {
    color: $status-color;
  }
}

@mixin execution-timeline {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: $execution-timeline-width;
    background: var(--el-border-color);
  }
  
  .timeline-item {
    position: relative;
    padding-left: 32px;
    
    &::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--el-color-primary);
      z-index: 1;
    }
  }
}

// 工具函数
// ----------------------------------------------

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function rem($pixels, $context: 16) {
  @return #{strip-unit($pixels) / strip-unit($context)}rem;
}

@function em($pixels, $context: 16) {
  @return #{strip-unit($pixels) / strip-unit($context)}em;
}